/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import { ModalForm, ProFormText } from '@ant-design/pro-form';
import React from 'react';
import { Typography } from 'antd';
import { signPersonMiniProgram } from '@/services/mini/aliapp';
import { useModel } from 'umi';

const { Text } = Typography;

const AliappAccount: React.FC<{ merchant: string; auth_appid: string; reloadTable: () => void }> = (
  props,
) => {
  const { merchant, auth_appid, reloadTable } = props;

  const { activeKey } = useModel('mini_aliapp');

  const title = `${activeKey != '1' ? '查看' : merchant ? '查看' : '上传'}商户号`;

  const onFinish = async (val: { merchant: any }) => {
    const { merchant: merchant_number } = val;
    const status = await signPersonMiniProgram({
      merchant_number,
      auth_appid: auth_appid,
    });
    if (status) {
      reloadTable();
    }
    return status;
  };

  return (
    <ModalForm
      title={title}
      width={400}
      modalProps={{
        centered: true,
      }}
      trigger={<a>{title}</a>}
      submitter={{
        render: (_, dom) => (merchant ? [] : [dom]),
      }}
      layout='horizontal'
      onFinish={onFinish}
    >
      {activeKey != '1' || merchant ? (
        <div style={{ marginBottom: 20 }}>
          <Text strong>商户号: {merchant || '--'}</Text>
        </div>
      ) : (
        <>
          <ProFormText
            name='merchant'
            label='商户号'
            placeholder='请输入商户号'
            rules={[{ required: true, message: '请输入商户号' }]}
          />
          <Text type='danger' key='tips'>
            注：商户号一旦绑定不可修改，请仔细核对
          </Text>
        </>
      )}
    </ModalForm>
  );
};

export default AliappAccount;
